<template>
	<div class="container" v-title data-title='新增客户'>
		<Header title="新增客户"></Header>
		<ul class="list-info-view">
			<li>
				<div class="unified-template">
					<div class="template-row-list">
						<label class="label-title">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
						<div class="row-content">
							<input type="text" placeholder="请输入姓名" class="routineInput" v-model="cList[0].name" @focus="handleFocus" @blur="handleBlur"/>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="unified-template">
					<div class="template-row-list">
						<label class="label-title">称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;谓</label>
						<div class="row-content">
							<div  class="checkbox-list">
								<label>
	                              <input style="top:0px;"type="radio" value="0" name="sex" v-model="cList[0].gender">先生
	                            </label>
	                            <label>
	                              <input style="top:0px;"type="radio" value="1" name="sex" v-model="cList[0].gender">女士
	                            </label>
                            </div>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="mint-cell mint-field" v-if="!isShow">
					<div class="mint-cell-wrapper">
						<div class="mint-cell-title">
							<span class="mint-cell-text">客户电话：</span>
						</div>
						<div class="mint-cell-value">
							<input type="tel" placeholder="请输入电话" class="mintPhone" v-model="cList[0].mobile"/>
						</div>
					</div>	
				</div>
				<div class="mint-cell mint-field"  v-if="isShow">
					<div class="mint-cell-wrapper">
						<div class="mint-cell-title">
							<span class="mint-cell-text">客户电话：</span>
						</div>
						<div class="mint-cell-value">
							<input type="tel" maxlength="7" class="digital-input-box" v-model="helfTel">
							<div class="digital-input">
								<div class="digital-input-item">{{ userTel.numA }}</div>
								<div class="digital-input-item">{{ userTel.numB }}</div>
								<div class="digital-input-item">{{ userTel.numC }}</div>
								<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
								<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
								<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
								<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
								<div class="digital-input-item">{{ userTel.numD }}</div>
								<div class="digital-input-item">{{ userTel.numE }}</div>
								<div class="digital-input-item">{{ userTel.numF }}</div>
								<div class="digital-input-item">{{ userTel.numG }}</div>
							</div>
						</div>
					</div> 	
				</div>
				<div class="mint-cell mint-field">
					<div class="mint-cell-wrapper" style="border-bottom:none;">
						<div class="mint-cell-title">
							<span class="mint-cell-text"></span>
						</div>
						<div class="mint-cell-value">
							<div class="telEye" @click="isShow = !isShow">
								<span class="toggleTel" v-if="!isShow">
									<i class="fa fa-eye-slash"></i>隐号报备
								</span>
								<span class="toggleTel" v-if="isShow">
									<i class="fa fa-eye"></i>全号报备
								</span>
							</div>
						</div>
					</div>	
				</div>
			</li>
			<li>
				<div class="unified-template">
					<div class="template-row-list">
						<label class="label-title">意&nbsp;&nbsp;向&nbsp;&nbsp;楼&nbsp;&nbsp;盘</label>
						<div class="row-content">
							<div class="routineInfo" @click="toPremisesListInfo()" >{{customer.name}}</div>
							<i class="fa fa-angle-right" v-if="falg"></i>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="unified-template" >
					<div class="template-row-list">
						<label class="label-title">期望带看时间</label>
						<div class="row-content">
							<input type="text"  placeholder="选择期望带看时间" readonly  class="routineTime" v-model="cList[0].visitProtectDate" @click="openPicker" >
						</div>
					</div>
				</div>
			</li>
			<!--<li>
				<div class="unified-template" v-if="!isSpecialShow">
					<div class="template-row-list">
						<label class="label-title" >是否特殊报备</label>
						<div class="row-content">
							<div class="checkbox-list" @click="isSpecial">
								<label>
	                              <input type="radio" value="0" name="specialRadio" v-model="cList[0].special">否
	                            </label>
	                            <label>
	                              <input type="radio" value="1" name="specialRadio" v-model="cList[0].special">是
	                            </label>
                            </div>
						</div>
					</div>
				</div>
			</li>	-->
			<li v-if="isSpecialShow">
				<div class="unified-template">
					<div class="template-row-list">
						<label class="label-title">GPS定位</label>
						<div class="row-content">
							<span>{{cList[0].coords}}</span>
							<a @click="openLocation" class="gpsLocation">
								查看地图<i class="fa fa-map-marker"></i>
							</a>
						</div>
					</div>
				</div>
			</li>
			<li v-if="isSpecialShow">
				<div class="unified-template">
					<h3 class="titlePhoto">照片上传</h3>
					<ul class="photo-list">
						<li v-for="(row, index) in fileList">
							<img v-bind:src="row.fileUrl" @click="previewImage(index)">
							<i class="fa fa-times-circle" @click="deletefile(index)"></i>
						</li>
						<li class="departureBtn">
							<a href="javascript:;">
								<i class="fa fa-plus"></i>
							</a>
							<input type="file" class="fileBtn" @change="onFileChange" name="files" id="files">
						</li>
					</ul>
				</div>
			</li>
		</ul>
		<div class="line bor-b"></div> 
		<textarea class="routineTextarea" placeholder="请描述客户意向，包括户型，面积等" v-model="params.remark" @focus="handleFocus" @blur="handleBlur" ></textarea>
		<button class="btn-block" @click="toRecommend()" v-if="showRecommend">推荐</button>
		<mt-datetime-picker
				ref="picker"
				type="datetime"
				v-model="selectedDatetime"
				@confirm="confirmDatetime">
		</mt-datetime-picker>
	</div>



</template>
<script>
	var wx=require('weixin-js-sdk');
    import { DatetimePicker } from 'mint-ui';
    export default{
		data(){
			return {
				customer:{
					tid:'',
					name:''
				},
				falg : true,
				time:'',
				params:{
					createTime:'',
					remark:''
				},
				cList:[{
					name:'',
					mobile:'',
					gender:'',
					email:'',
					special:'',
					coords:'',
					visitProtectDate:''
				}],
				isShow:false,
				isSpecialShow:false,
		      	helfTel:'',
		      	showRecommend: true,
		      	latitude:'',
				longitude:'',
				fileList:[],
				fileNameList:[],
                selectedDatetime:new Date()
			}
		},
		components: {
		},
		computed: {
			userTel () {
		      let numA,numB,numC,numD,numE,numF,numG
		      if ((this.helfTel).length > 0) {
		        numA = this.helfTel.substring(0,1); 
		        numB = this.helfTel.substring(1,2);
		        numC = this.helfTel.substring(2,3);
		        numD = this.helfTel.substring(3,4);
		        numE = this.helfTel.substring(4,5);
		        numF = this.helfTel.substring(5,6);
		        numG = this.helfTel.substring(6,7);
		      }
		      return {
		        numA,numB,numC,numD,numE,numF,numG
		        // ,numC,numD,numE,numF,numG
		      }
		    }
		},
		mounted: function() {
	       this.initCustomerInfo();
	       this.cList[0].name = sessionStorage["zName"];
	       this.cList[0].mobile = sessionStorage["zMobile"];
	       this.cList[0].gender = sessionStorage["zGender"];
	       this.params.remark = sessionStorage["zRemark"];
	       this.params.createTime = sessionStorage["zCreateTime"];
	       if(sessionStorage["helfTel"]){
	       	this.helfTel=sessionStorage["helfTel"];
	       	this.isShow=true;
	       }else{
	       	this.isShow=false;
	       }
	       this.wxConfig();
		}, 
		watch:{
			cList:{
				handler(newValue,oldValue){
					var _self = this;
					_self.timesChange()
				},
				deep:true
			}
　　　　},
		methods:{
			timesChange:function(){
				var _self = this;
				var timeStr = _self.cList[0].visitProtectDate;
				if(timeStr){
					if(_self.time==''){
						_self.time=timeStr;
						var url = _self.utilHelper.apiUrl+'/api/isInSpecialTime';
						var premises = _self.customer.tid;
						if(!premises){
							return ;
						}
						var body = {};
						body.params={'hopeTime':timeStr,'premisesId':_self.customer.tid}
							_self.$http.post(url,body).then((response) => {
							var data = response.body.resData;
							var time= data.specialTime;
							var msg = data.msg;
							var saveDays = data.saveDays;
							if (data.result == 1) {
								if(msg=='1'){
									//特殊报备
									layer.confirm('您的报备时间距离期望带看时间不足'+time+'分钟，需要上传图片和定位，或者修改期望带看时间', {
									    btn: ['修改带看时间','上传'], //按钮
									    shade: false //不显示遮罩
									}, function(){
										layer.closeAll();
									}, function(){
										_self.getLocation();
									    _self.isSpecialShow=true;
									});
									
								}else if(msg=='2'){
									_self.isSpecialShow=false;
								}else if(msg=='3'){
									layer.alert('您选择的时间必须大于系统当前时间');
								}else if(msg=='4'){
									layer.confirm('本楼盘的到访延长时间为'+saveDays+'分钟，从报备之时起'+saveDays+'分钟内未到访，需要重新报备，您的期望带看时间已超过了到访延长时间', {
									    btn: ['修改带看时间','没关系，届时再报备'], //按钮
									    shade: false //不显示遮罩
									}, function(){
										layer.closeAll();
									}, function(){
									   layer.closeAll();
									});
								}
							}
								
						});
					}else{
						if(_self.time!=timeStr){
							_self.time=timeStr;
							var premises = _self.customer.tid;
							if(!premises){
								return;
							}
							var url = _self.utilHelper.apiUrl+'/api/isInSpecialTime';
							var body = {};
							body.params={'hopeTime':timeStr,'premisesId':premises}
							_self.$http.post(url,body).then((response) => {
								var data = response.body.resData;
								var time= data.specialTime;
								var msg = data.msg;
								var saveDays = data.saveDays;
								if(data.result == 1) {
									if(msg==1){
										layer.confirm('您的报备时间距离期望带看时间不足'+time+'分钟，需要上传图片和定位，或者修改期望带看时间', {
										    btn: ['修改带看时间','上传'], //按钮
										    shade: false //不显示遮罩
										}, function(){
											layer.closeAll();
										}, function(){
										   _self.isSpecialShow=true;
										   _self.getLocation();
										});
									}else if(msg==2){
										_self.isSpecialShow=false;
									}else if(msg==3){
										layer.alert('您选择的时间必须大于系统当前时间');
									}else if(msg==4){
										layer.confirm('本楼盘的到访延长时间为'+saveDays+'分钟，从报备之时起'+saveDays+'分钟内未到访，需要重新报备，您的期望带看时间已超过了到访延长时间', {
										    btn: ['修改带看时间','没关系，届时再报备'], //按钮
										    shade: false //不显示遮罩
										}, function(){
											layer.closeAll();
										}, function(){
										   layer.closeAll();
										});
									}
								}
							});
						}
					}
				}
			},
			initCustomerInfo:function(){
				var _self=this;


				_self.customer.tid = _self.$route.params.id;
				if(_self.customer.tid == '' || _self.customer.tid == null){
					this.customer.name = "请选择"
					this.falg = true;
				}else{
					_self.customer.name = _self.$route.params.name;
					_self.falg = false;
				}
			},
			toPremisesListInfo() {
				if(this.params.createTime == null || this.params.createTime == ""){
					this.params.createTime = ""
				}
				if(this.cList[0].name == null || this.cList[0].name == ""){
					this.cList[0].name = ""
				}
				if(this.cList[0].mobile == null || this.cList[0].mobile == ""){
					this.cList[0].mobile = ""
				}
				if(this.params.remark == null || this.params.remark == ""){
					this.params.remark = ""
				}
				if(this.cList[0].gender == null || this.cList[0].gender == ""){
					this.cList[0].gender = ""
				}
				if(this.helfTel == null ||this.helfTel == ""){
					this.helfTel = ""
				}
				sessionStorage.zName = this.cList[0].name;
				sessionStorage.zMobile = this.cList[0].mobile;
				sessionStorage.zRemark = this.params.remark;
				sessionStorage.zCreateTime = this.params.createTime;
				sessionStorage.zGender = this.cList[0].gender;
				sessionStorage.helfTel =this.helfTel;
				if(this.customer.tid == '' || this.customer.tid == null){
					// 判断跳转
					this.$router.push({
						path: '/intentionPremisesList'
					})
				}else if(this.$route.params.spec == 1){
					this.$router.push({
						path: '/intentionPremisesList'
					})
				}
			},
			toRecommend() {
                //若为游客则弹出绑定对话框
              	if(this.tourist()){
              	    return ;
				}

				var _self=this;
				if(_self.vaild()){
					// 删除保存记录
					sessionStorage.removeItem("zName");
					sessionStorage.removeItem("zMobile");
					sessionStorage.removeItem("zRemark");
					sessionStorage.removeItem("zCreateTime");
					sessionStorage.removeItem("zGender");
					sessionStorage.removeItem("helfTel");
					var paramsList = {};
					paramsList.staffId = window.sessionStorage.getItem(_self.utilHelper.appAgency+"_userId");
					paramsList.createTime = _self.params.createTime;
					paramsList.remark = _self.params.remark;
					paramsList.premisesId = _self.customer.tid;
					//paramsList.customerList = JSON.stringify(_self.cList);
					paramsList.customerList = JSON.parse(JSON.stringify(_self.cList));
					//判断时候特殊报备
					if(_self.isSpecialShow ==true){
						paramsList.reportType = "2";
						paramsList.latitude = _self.latitude;
				    	paramsList.longitude = _self.longitude;
				    	if(_self.fileNameList.length <= 0){
				    		layer.msg("请上传图片");
				    		return false;
				    	}
				    	paramsList.fileList = JSON.parse(JSON.stringify(_self.fileNameList));
				    	var visitProtectDate = _self.cList[0].visitProtectDate;
						if(visitProtectDate == ""){
							layer.msg("请选择期望带看时间");
				    		return false;
						}
						paramsList.visitProtectDate = visitProtectDate + ":00";
					}else{
						paramsList.reportType = "1";
						var visitProtectDate = _self.cList[0].visitProtectDate;
						if(visitProtectDate == ""){
							layer.msg("请选择期望带看时间");
				    		return false;
						}
						paramsList.visitProtectDate = visitProtectDate + ":00";
					}
					if(paramsList.remark == undefined || paramsList.remark == "undefined"){
						paramsList.remark = "";
					}
					var body = {};
					body.params = paramsList;
					_self.showRecommend = false;
					var url = _self.utilHelper.apiUrl + "/api/addReport";
					_self.$http.post(url,body).then((response) => {
						var body = response.body;
						var resData = body.resData;
						var errorMsg = body.errorMsg;
			   			if(body.result == 1){
			   				var returnMsg = JSON.parse(resData.resultMsg);
							var successCount = returnMsg.successCount;
							var failCount = returnMsg.failCount;
							var failMsg = returnMsg.failMsg;
			   				var successCountMsg = "成功["+successCount+"]条";
			   				var failCountMsg = "失败["+failCount+"]条";
			   				if(successCount == 0){
			   					_self.showRecommend = true;
			   					layer.msg(failMsg, {
				   					time:3000
				   				});
			   				}else{
			   					if(failCount == 0 && successCount > 0){
			   						layer.msg("提交成功", {
										time: 2000
									}, function(){
										_self.$router.push({
											path: '/declare'
										})
									}); 
			   					}else{
			   						layer.msg(successCountMsg+"\n"+failCountMsg+"\n"+failMsg, {
										time: 2000
									}, function(){
										_self.$router.push({
											path: '/declare'
										})
									}); 
			   					}
			   				}
			   			}else{
			   				_self.showRecommend = true;
			   				layer.msg("操作失败:"+errorMsg,{
			   					time:2000
			   				});
			   			}
					});
				}
			},
			vaild:function(){
				var _self = this;
				if(!_self.cList[0].name){
					layer.msg("请输入姓名",{
						time: 2000
					});
					return false;
				}else{
					if(_self.cList[0].name.length > 10){
						layer.msg("姓名最多输入10个字符",{
							time: 2000
						});
						return false;
					}
				}
				if(!_self.cList[0].gender){
					layer.msg("请选择称谓",{
						time: 2000
					});
					return false;
				}

				//判断是否隐号
				if(_self.isShow == true){
					let numA = _self.helfTel.substring(0,3);
					let numB = _self.helfTel.substring(3);
					if(!(/^1(3|4|5|6|7|8|9)\d{1}$/.test(numA)) || !(/^\d{4}$/.test(numB))){
						layer.msg("请输入正确的号码",{
							time: 2000
						});
						return false;
					}
					_self.cList[0].mobile = numA + "****" + numB;
				}else{
					if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.cList[0].mobile))){
						layer.msg("请输入正确的号码",{
							time: 2000
						});
						return false;
					}
				}
				if(!_self.customer.tid){
					layer.msg("请选择楼盘",{
						time: 2000
					});
					return false;
				}
				return true;
			},
			handleFocus:function(){
				document.getElementById("goble_menu_div").style.display="none";
			},
			handleBlur:function(){
				document.getElementById("goble_menu_div").style.display="block";
			},
			isSpecial(){
				var _self = this;
				if(_self.cList[0].special == "1"){
					_self.getLocation();
					_self.isSpecialShow = true;
				}else{
					_self.isSpecialShow = false;
				}
			},
			wxConfig(){
                //获取微信js_sdk授权
                var currUrl = location.href.split('#')[0];
                var body = {};
                body.params={
                	url:currUrl
                };
                var url = this.utilHelper.apiUrl+'/api/js_ticket.do';
                this.$http.post(url,body).then((response)=>{
                    var data = response.body.resData;
                    wx.config({
                          debug: false,
                          appId: data.appid, // 必填，公众号的唯一标识
                          timestamp: data.time, // 必填，生成签名的时间戳
                          nonceStr: data.noncestr, // 必填，生成签名的随机串
                          signature: data.signature,// 必填，签名，见附录1
                          jsApiList: ['getLocation','openLocation']
                    });
                });
            },
			getLocation() {
				var _self = this;
				wx.getLocation({
				    type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
				    success: function (res) {
				        _self.latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
				        _self.longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
				        var speed = res.speed; // 速度，以米/每秒计
				        var accuracy = res.accuracy; // 位置精度
				        var coords = res.longitude + "," + res.latitude;
				        _self.cList[0].coords = coords;
				    }
				});
			},
			openLocation() {
				var _self = this;
				wx.openLocation({
			       	latitude: _self.latitude,
			      	longitude: _self.longitude,
			      	name: '客户报备',
			      	//address: '',
			      	scale: 15,
			      	//infoUrl: ''
			    });
			},
			//创建图片对象
			onFileChange(e) {
				layer.load(0, {shade: false}); //弹出加载层
		        var files = e.target.files || e.dataTransfer.files;
		        if (!files.length)
		           return;
		        this.createImage(files[0]);
		    },
		    createImage(file) {
		        var _self = this;
				var reader = new FileReader();
		        reader.readAsDataURL(file);
		        reader.onload = function(e){  
		            _self.ajaxfile(e.target.result);
		        };  
		    },
		    //将base64转换blob
		    dataURLtoBlob(dataUrl) {
			    var arr = dataUrl.split(','), 
			        mime = arr[0].match(/:(.*?);/)[1],
			        bstr = atob(arr[1]), 
			        n = bstr.length, 
			        u8arr = new Uint8Array(n);
			    while (n--) {
			        u8arr[n] = bstr.charCodeAt(n);
			    }
			    return new Blob([u8arr], { type: mime });
		    },
		    //上传图片
		    ajaxfile(file){
		    	var _self = this;
		    	var myForm = new FormData();     //创建formdata
				var blobBin = _self.dataURLtoBlob(file);     //base64转换blob
				myForm.append("blobObject", blobBin);    //想formData添加blob数据
		    	var url = _self.utilHelper.apiUrl+'/api/uploadBase64';
                _self.$http.post(url,myForm).then((response)=>{
                	layer.closeAll('loading'); //关闭加载层
                	var data = response.body;
                	if(data.result == "1"){
                		var filesUrl = {
							"fileUrl":file
						};
						_self.fileList.push(filesUrl);
						var fileName = {
							"fileName":data.resData.imgName
						};
						_self.fileNameList.push(fileName);
                	}else{
                		layer.msg("图片上传失败，请重试");
                	}
                });
		    },
		    //图片预览
			previewImage(index){
				var _self = this;
				var imgList = new Array();
				for(var i = 0; i < _self.fileList.length; i++){
					imgList.push(_self.fileList[i].fileUrl);
				}
				wx.previewImage({
			      	current: imgList[index],
			      	urls: imgList
			    });
			},
		    //删除图片
		    deletefile(id){
		    	this.fileList.splice(id, 1);
		    	this.fileNameList.splice(id, 1);
		    },
			//打开时间控件id="start_date"
            openPicker() {
                this.$refs.picker.open();
            },
            confirmDatetime(){
		        this.cList[0].visitProtectDate = this.GMTToStr(this.selectedDatetime);
			},
            GMTToStr(time){
                let date = new Date(time)
                let Str=date.getFullYear() + '-' ;
				let month = (date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):(date.getMonth() + 1);
				let day = date.getDate() < 10 ? '0'+date.getDate():date.getDate();
				let hour =  date.getHours()<10?'0'+date.getHours():date.getHours();
				let minute = date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes();
                Str += month + '-' + day + ' '+ hour + ':' +minute + ':00';

                return Str
            }
		}
	}

</script>
<style scoped>
	/*新增报备*/
.list-info-view{background-color: #FFF;}
.list-info-view .template-row-list{height: 43px;line-height: 44px;}
.list-info-view>li:after{content: '';height: 1px;background-color: #ccc; -webkit-transform: scaleY(.5);transform: scaleY(.5);display: block;width: 100%;}
.list-info-view .template-row-list{padding-left: 100px;}
.list-info-view .label-title{width: 100px;font-size: 14px;}
.template-row-list .routineInput{line-height: 30px;padding-left: 10px;background-color: #fff;}
.template-row-list .routineSelect,.template-row-list .routineTime{padding-right: 20px;padding-left: 10px; width: 100%;line-height: 30px;background-color: #fff;}
.row-content .fa-angle-right{position: absolute;right: 0;top: 10px;font-size: 20px;display: block;}
.routineInfo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width: 185px;}
.routineTextarea,.followTextarea{width: 100%;height: 110px;border-bottom: 1px solid #ccc;padding: 10px;font-size: 14px;}
.followTextarea{height: 200px;}
.routineSelect .unselecteds{color: #999;}
.btn-block{width: 90%;height: 40px;display: block;margin:36px auto;background-color: #ff7900;color: #fff;font-size: 14px;line-height: 40px;border-radius: 4px;}
.checkbox-list label{margin-right: 10px;padding-left: 5px;}
.checkbox-list label input{position: relative;top: 7px;margin-right: 6px;left: 0px}
.checkbox-list label:last-child{margin-right: 0;}
	
	
	.mint-field {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	}
	.mint-cell {
	    background-color: #fff;
	    box-sizing: border-box;
	    color: inherit;
	    min-height: 48px;
	    display: block;
	    overflow: hidden;
	    position: relative;
	    text-decoration: none;
	}
	.mint-cell-wrapper {
		border-bottom: 1px solid #f5f5f5;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    box-sizing: border-box;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    font-size: 16px;
	    line-height: 1;
	    min-height: inherit;
	    overflow: hidden;
	    padding: 0 10px;
	    width: 100%;
	}
	.mint-field .mint-cell-title {
	    width: 105px;
	    -webkit-box-flex: 0;
	    -ms-flex: none;
	    flex: none;
	}
	.mint-field .mint-cell-value {
	    -webkit-box-flex: 1;
	    -ms-flex: 1;
	    flex: 1;
	    color: inherit;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	}
	.mint-field .mint-cell-title{color: #000;}
	.mint-cell-value .sexBtn{width: 56px;height: 24px;border-radius: 4px;border:1px solid #cdcdcd;text-align: center;line-height: 22px;font-size: 12px;margin: 0 4px;}
	.mint-cell-value .sexBtn.active{border:1px solid #eb6100;color: #eb6100;background-color: #ffece0;}
	.telEye{color: #ec6f26;position: absolute;right: 10px;display: inline-block;top: 16px;}
	.toggleTel .fa{margin-right: 6px;}
	.mint-cell-value .mintPhone{line-height: 30px;padding-left: 10px;background-color: #fff;outline: none;}

	.digital-input-box{position: absolute; opacity: 0.01;display: block; z-index: 50; left: 105px;width: 100%; top: 2px; height: 46px;}
	.digital-input{overflow: hidden;width: 100%;}
	.digital-input .digital-input-item{height: 48px;float: left;width: 9.09%;border-right: 1px dashed #d8d8d8;text-align: center;line-height: 48px;display: flex; justify-content: center;align-items: center;}
	.digital-input .digital-input-item:first-child{border-left:1px solid #d8d8d8;}
	.digital-input-item .fa{font-size: 12px;color: #999;}

	.mint-field.is-textarea .mint-cell-wrapper .mint-cell-text{position: absolute;top: 12px;}
	.report-button{padding: 0 10px;}
	.report-button .mint-button--danger{background-color: #eb6100;margin-top: 20px;}

	.gpsLocation{float: right;position: relative;padding-right: 24px;}
	.gpsLocation>.fa{display: block;top: 12px;color: #eb6100;}
	.titlePhoto{font-weight: normal;padding: 10px;}
	.photo-list li{float: left;width: 64px;height: 64px;position: relative;border:1px solid #cdcdcd;margin: 0 5px 10px;}
	.photo-list li>img{width: 100%;height: 100%;}
	.photo-list>li .fa-times-circle{position: absolute;right: -8px;top: -8px;color: #ff6666;font-size: 18px;}
	.photo-list .departureBtn{border:none;}
	.departureBtn>a{border: 1px dashed #7f7f7f;height: 100%;display: block;text-align: center;}
	.departureBtn>a .fa-plus{font-size: 30px;color: #7f7f7f;margin-top: 16px; }
	.departureBtn .fileBtn{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 999;opacity: 0;}
	.digital-input:after,.photo-list:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}
</style>